<template>
    <div class="address-add">
        <div class="add">添加地址</div>
        <div class="address">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                            v-model="addressAdd.contactName"
                            label="姓名"
                            placeholder="姓名"
                            :rules="[{ required: true, message: '请填写姓名' }]"
                    />
                    <div class="sex-wrapper">
                        <div class="sex">性别</div>
                        <van-radio-group v-model="addressAdd.sex" direction="horizontal" >
                            <van-radio name="1">男</van-radio>
                            <van-radio name="2">女</van-radio>
                        </van-radio-group>
                    </div>
                    <van-field
                            v-model="addressAdd.phone"
                            label="电话"
                            placeholder="电话"
                            :rules="[{ required: true, message: '请填写电话' },]"
                    />

                    <van-field
                            v-model="addressAdd.address"
                            label="地址"
                            placeholder="地址"
                            :rules="[{ required: true, message: '请填写地址' },]"
                    />

                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit" class="bgcolor">
                        添加
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>

import {showNotify} from "vant";
import { showConfirmDialog } from 'vant';

export default {
    name: "addressAdd",
    data(){
        return{
            addressAdd:{
                contactName:'',
                sex:'',
                phone:'',
                address:''
            },
            checked:''
        }
    },
    methods:{
        onSubmit(){
            this.$axios.post('/ele_server/address/deliveryAdd',this.addressAdd
            ).then(({data:res}) => {
                if(res.status == 0){
                    res.data = this.addressAdd
                    showNotify({ type: 'primary', message: '添加成功' })
                    this.$router.push('/order/confirm')
                }else{
                    showNotify({ type: 'primary', message: '添加失败' })
                }
            })
        },

    },
    created(){
    }

}
</script>

<style scoped lang="stylus">
.address-add
  .add
    background-color #ee0a24
    font-size 20px
    font-weight bold
    text-align center
    padding 15px 0
    color white
    margin 0 0 20px 0
  .address
    .van-form
      .van-cell-group
        .sex-wrapper
          display  flex
        .sex
          font-size 15px
          margin 10px 50px 10px 15px
    .bgcolor
        background-color: #ee0a24


</style>
